<html>
<head>
	<meta charset="utf-8">
    <title>Контроллер</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">
    <style type="text/css">
		body {
			margin: 50px 10px;
			padding: 0;
		}
    </style>
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.3/bootstrap.min.js"></script>
	<script type="text/javascript">


//Порт к которому подключен Arduino
var serialPort = 'COM5';

//непосредственно управляющая функция
var Arduino = function(command, callback){
	$.get('c.py',{
		c:command,
		p:serialPort
	}, callback);
}

//Отображение контролов
var Controller = function(){
	
	this.ports = 13;
	this.container = $('#list');
	this.start = function(){
		var self = this;
		for(var i =1; i < this.ports+1; i++){
			var el = $('<p>').attr('class','span5');
			el.append($('<div>').attr('class','span2').text(i));
			el.append(
				$('<button>')
					.attr('class','span2 btn btn-danger')
					.attr('data-id',i)
					.text('Off')
					.click(function(){
						if($(this).hasClass('btn-success')){
							$(this).attr('class','span2 btn btn-danger').text('Off');
							Arduino("0"+$(this).data('id'));
						}else{
							$(this).attr('class','span2 btn btn-success').text('On');
							Arduino("1"+$(this).data('id'));
						}
					})
			);
			el.append(
				$('<div>').attr('class','span8').css('padding',"8px 10px").append(
					$('<div>').attr('class','slider').attr('data-id',i)
				)
			);
			this.container.append(el);
		}
		this.container.find('.slider').slider({
			min: 0,
			max: 166,//255, //максимальное значение передаваемое слайдером
			slide: function( event, ui ) {
				var pin = $(this).data('id');
				Arduino("3"+(pin < 10 ? "0" + pin : pin)+ui.value);
			}
		});
	}

	this.start();
}
$(document).ready(function(){
    new Controller();
});
	</script>
</head>
<body>
	<div class="container-fluid" id="generalContent">
		<div class="row-fluid" id='list'><div></div></div>
    </div>
</body>
</html>